<template>
  <view class="comment" @tap.stop="clickTap(comments)">
    <view class="comment-info">
      <image
        class="img"
        mode="scaleToFill"
        :src="comments.avatar || comments.user.avatar"
      />
      <view
        >{{ comments.nickname || comments.user.nickname
        }}{{
          fromName == ""
            ? ""
            : fromName == comments.user.user_id
            ? ""
            : " @ " + fromName
        }}</view
      >
      <view class="comment-time">{{
        formatDateTime(comments.createTime)
      }}</view>
    </view>
    <view class="comment-content">{{ comments.content }}</view>

    <view class="children" v-if="comments.children.length">
      <StChildComment
        :comments="child"
        v-for="child in comments.children"
        :key="child.id"
        :fromName="comments.user.user_id"
      >
      </StChildComment>
    </view>
    <uni-popup ref="recoveryPopup" type="bottom" background-color="#fff"
      ><view class="recovery-popup">
        <view class="recovery-input"
          ><uni-easyinput
            v-model="recoveryContent"
            type="text"
            placeholder="请输入回复内容"
            :maxlength="-1"
            :focus="true"
        /></view>
        <view class="recovery-btn" @tap="addRecoverComment">回复</view>
      </view></uni-popup
    >
  </view>
</template>

<script setup lang="ts">
import { formatDateTime } from "@/utils/time";
import { useMemberStore } from "@/stores";
import { addRecoverCommentAPI } from "@/services";
import { ref } from "vue";
const member = useMemberStore();
const { comments, fromName } = defineProps<{
  comments: any;
  fromName: string;
}>();
let recoveryContent = ref("");
let recoveryPopup = ref();
let recoveryParams = ref({});
const clickTap = (child: any) => {
  let id = 0;
  if (child.comment_id) {
    id = child.comment_id;
  } else {
    id = child.id;
  }
  if (member.profile) {
    recoveryPopup.value.open();
    recoveryParams.value = {
      userId: member.profile.user_id,
      parentId: id,
    };
  } else {
    uni.showToast({
      title: "请先登录",
      icon: "error",
    });
  }
};
const addRecoverComment = async () => {
  let params = {
    content: recoveryContent.value,
    ...recoveryParams.value,
  };
  let result: any = await addRecoverCommentAPI(params);
  if (result.code == 200) {
    result.data.children = [];
    result.data.user = {
      nickname: result.data.nickname,
      avatar: result.data.avatar,
    };
    comments.children.push(result.data);
    recoveryContent.value = "";
    recoveryPopup.value.close();
    uni.showToast({
      title: "回复成功",
      icon: "success",
    });
  } else {
    uni.showToast({
      title: "回复失败",
      icon: "error",
    });
  }
};
</script>
<style lang="scss">
.comment {
  padding: 5rpx 10rpx;
  .comment-info {
    display: flex;
    // align-items: center;
    position: relative;
    .img {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }
    .comment-time {
      position: absolute;
      font-size: 20rpx;
      color: #999;
      right: 10rpx;
      bottom: 0;
    }
  }
  .comment-content {
    padding: 10rpx 0;
    // 首行缩进
    text-indent: 80rpx;
  }
  .children {
    padding-left: 25rpx;
  }
  .recovery-popup {
    padding: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .recovery-input {
      flex: 1;
      margin-right: 10rpx;
    }
    .recovery-btn {
      width: 100rpx;
      height: 60rpx;
      background-color: #ffa500;
      border-radius: 30rpx;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
